<template>
    <div id="main" :style="'background-color:'+currStatus.color">{{currStatus.text}}</div>
</template>

<script type="text/javascript">
    export default{
        name:'two_status',
        props:['st'],
        data(){
            return {
                statusList :[
                  {code:1,text:'正常',color:'#00c261'},
                  {code:2,text:'预警',color:'#f29100'},
                  {code:3,text:'超期',color:'#f30'},
                  ],
                currStatus :{code:1,text:'正常',color:'#00c261'},
            }
        },
        created:function(){
            this.getStatus()
        },
        methods :{
            getStatus(){
                for(let i=0; i<this.statusList.length;i++){
                    if(this.$props.st == this.statusList[i].code){
                      this.currStatus =  this.statusList[i];
                    }
                }
            }
        }
    }
</script>

<style scoped="true" type="text/css">
      #main{
          color:#fff;
          border-radius:6px ;
      }
</style>
